<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
        <!-- #endif -->
    </page-meta>

    <view class="setup-guide">
        <!-- 自定义导航栏 -->
        <u-navbar
            :title="'初次设置引导'"
            :background="{ backgroundColor: '#FFFFFF' }"
            :border-bottom="false"
            back-icon-color="#333333"
            :is-back="currentStep > 1"
            @leftClick="handleBackClick"
        ></u-navbar>

        <view class="container">
            <!-- 头部Logo和欢迎文字 -->
            <view class="header">
                <view class="logo">
                    <u-icon name="heart" color="#ffffff" size="60"></u-icon>
                </view>
                <text class="text-2xl font-bold">孕育宝典</text>
               
            </view>

            <!-- 步骤指示器 - 使用u-steps组件 -->
            <u-steps
                :current="currentStep - 1"
                :list="stepsList"
                active-color="#FF9FB5"
            ></u-steps>

            <!-- 步骤1: 选择阶段 -->
            <view class="step-content" v-if="currentStep === 1">
                <text class="text-base text-content text-center block mb-8">
                    选择您当前的所处阶段，我们将为您提供相应的内容
                </text>

                <view
                    class="option-card"
                    :class="{ selected: selectedOption === 'preparing' }"
                    @click="selectOption('preparing')"
                >
                    <view class="option-title">
                        <u-icon name="heart-fill" color="#FF9FB5" size="42"></u-icon>
                    </view>
                    <view class="mx-2">
                        <view class="text-xl font-bold">备孕阶段</view>
                        <view class="text-sm text-content mt-1">正在计划怀孕，需要排卵预测、备孕指导等功能</view>
                    </view>
                    <u-icon
                        v-if="selectedOption === 'preparing'"
                        class="check-icon"
                        name="checkmark-circle"
                        color="#FF9FB5"
                        size="46"
                    ></u-icon>
                </view>

                <view
                    class="option-card"
                    :class="{ selected: selectedOption === 'pregnant' }"
                    @click="selectOption('pregnant')"
                >
                    <view class="option-title">
                        <u-icon name="woman" color="#FF9FB5" size="42"></u-icon>
                    </view>
                    <view class="mx-2">
                        <view class="text-xl font-bold">孕期阶段</view>
                        <view class="text-sm text-content mt-1">已经怀孕，需要孕期跟踪、胎儿发育等功能</view>
                    </view>
                    <u-icon
                        v-if="selectedOption === 'pregnant'"
                        class="check-icon"
                        name="checkmark-circle"
                        color="#FF9FB5"
                        size="46"
                    ></u-icon>
                </view>

                <view
                    class="option-card"
                    :class="{ selected: selectedOption === 'postpartum' }"
                    @click="selectOption('postpartum')"
                >
                    <view class="option-title">
                        <u-icon name="baby-carriage" color="#FF9FB5" size="42"></u-icon>
                    </view>
                    <view class="mx-2">
                        <view class="text-xl font-bold">产后阶段</view>
                        <view class="text-sm text-content mt-1">已经生产，需要产后恢复、婴儿成长等功能</view>
                    </view>
                    <u-icon
                        v-if="selectedOption === 'postpartum'"
                        class="check-icon"
                        name="checkmark-circle"
                        color="#FF9FB5"
                        size="46"
                    ></u-icon>
                </view>

                <button
                    class="custom-button"
                    :class="{ 'button-disabled': !selectedOption }"
                    :disabled="!selectedOption"
                    @click="goToStep(2)"
                >
                    下一步
                </button>
            </view>

            <!-- 步骤2: 填写相关信息 -->
            <view class="step-content" v-if="currentStep === 2">
                <!-- 步骤导航 -->
                <view class="step-nav">
                    <view class="back-button" @click="goToStep(1)">
                        <u-icon name="arrow-left" color="#666" size="20"></u-icon>
                        <text>返回上一步</text>
                    </view>
                </view>

                <!-- 备孕阶段表单 -->
                <PreparingForm 
                    v-if="selectedOption === 'preparing'" 
                    v-model:formData="formData" 
                    :today="today"
                    @validate="isFormValid = $event"
                />

                <!-- 孕期阶段表单 -->
                <PregnantForm 
                    v-if="selectedOption === 'pregnant'" 
                    v-model:formData="formData" 
                    :today="today"
                    @validate="isFormValid = $event"
                />

                <!-- 产后阶段表单 -->
                <PostpartumForm 
                    v-if="selectedOption === 'postpartum'" 
                    v-model:formData="formData" 
                    :today="today"
                    @validate="isFormValid = $event"
                />

                <button
                    class="custom-button"
                    :class="{ 'button-disabled': !isFormValid }"
                    :disabled="!isFormValid"
                    @click="goToStep(3)"
                >
                    下一步
                </button>
            </view>

            <!-- 步骤3: 完成设置 -->
            <view class="step-content" v-if="currentStep === 3">
                <!-- 步骤导航 -->
                <view class="step-nav">
                    <view class="back-button" @click="goToStep(2)">
                        <u-icon name="arrow-left" color="#666" size="20"></u-icon>
                        <text>返回上一步</text>
                    </view>
                </view>

                <CompletionStep 
                    :selectedOption="selectedOption" 
                    :formData="formData"
                    @enter-home="enterHome"
                />
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { computed, reactive, ref, watch } from 'vue'
import dayjs from 'dayjs'
import PreparingForm from '@/components/setup-guide/PreparingForm.vue'
import PregnantForm from '@/components/setup-guide/PregnantForm.vue'
import PostpartumForm from '@/components/setup-guide/PostpartumForm.vue'
import CompletionStep from '@/components/setup-guide/CompletionStep.vue'

// 定义表单数据类型
interface FormData {
    lastPeriodDate: string
    periodDuration: number
    cycleDuration: number
    lastMenstrualPeriod: string
    dueDate: string
    birthDate: string
}

// 步骤列表
const stepsList = [{ name: '选择阶段' }, { name: '填写信息' }, { name: '完成设置' }]

// 状态管理
const currentStep = ref<number>(1)
const selectedOption = ref<string>('')
const isFormValid = ref<boolean>(false)
const today = ref<string>(dayjs().format('YYYY-MM-DD'))

// 表单数据
const formData = reactive<FormData>({
    lastPeriodDate: '',
    periodDuration: 5,
    cycleDuration: 28,
    lastMenstrualPeriod: '',
    dueDate: '',
    birthDate: ''
})

// 监听formData变化，自动验证表单
watch(formData, () => {
    console.log('父组件 formData 变化:', JSON.stringify(formData))
    validateForm()
}, { deep: true })

// 方法
// 选择阶段选项
const selectOption = (option: string): void => {
    selectedOption.value = option
    // 测试数据 - 仅用于调试
    if (option === 'preparing') {
        formData.lastPeriodDate = dayjs().subtract(14, 'day').format('YYYY-MM-DD')
    } else if (option === 'pregnant') {
        formData.lastMenstrualPeriod = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
    }
    validateForm()
}

// 验证表单
const validateForm = (): void => {
    if (selectedOption.value === 'preparing') {
        isFormValid.value =
            !!formData.lastPeriodDate &&
            formData.periodDuration >= 1 &&
            formData.periodDuration <= 15 &&
            formData.cycleDuration >= 21 &&
            formData.cycleDuration <= 45
    } else if (selectedOption.value === 'pregnant') {
        isFormValid.value = !!formData.lastMenstrualPeriod
    } else if (selectedOption.value === 'postpartum') {
        // 产后阶段无必填字段
        isFormValid.value = true
    }
    console.log('表单验证结果:', isFormValid.value, formData)
}

// 步骤导航
const goToStep = (step: number): void => {
    currentStep.value = step
}

// 处理返回按钮点击
const handleBackClick = (): void => {
    if (currentStep.value > 1) {
        goToStep(currentStep.value - 1)
    }
}

// 进入首页
const enterHome = (): void => {
    // 保存用户选择的状态到本地存储
    uni.setStorageSync('userStatus', selectedOption.value)

    // 收集并保存表单数据
    const userData = {
        status: selectedOption.value,
        ...formData
    }

    uni.setStorageSync('userData', JSON.stringify(userData))

    // 跳转到首页
    uni.switchTab({
        url: '/pages/index/index'
    })
}

// 生命周期钩子
onLoad(() => {
    // 初始化逻辑，如果需要的话
})
</script>

<style lang="scss" scoped>
.setup-guide {
    min-height: 100vh;
    background-color: #ffffff;
}

.container {
    padding: 20rpx 30rpx;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40rpx;
    padding-top: 20rpx;
}

.logo {
    width: 140rpx;
    height: 140rpx;
    background-color: var(--color-primary, #ff9fb5);
    border-radius: 36rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
}

.step-content {
    margin-top: 30rpx;
    animation: fadeIn 0.3s;
}

/* 步骤导航 */
.step-nav {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20rpx;
}

.back-button {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #666;
    padding: 10rpx;
}

.back-button u-icon {
    margin-right: 8rpx;
}

/* 选项卡片样式 */
.option-card {
    border: 2rpx solid #f0f0f0;
    border-radius: 24rpx;
    padding: 32rpx;
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    position: relative;
    transition: all 0.2s;
}

.option-card:hover {
    border-color: #ffd6e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.option-card.selected {
    border-color: var(--color-primary, #ff9fb5);
    background-color: rgba(255, 159, 181, 0.05);
}

.option-title {
    width: 80rpx;
    height: 80rpx;
    background-color: rgba(255, 159, 181, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
}

.mx-2 {
    flex: 1;
}

.text-content {
    color: #666;
}

.check-icon {
    position: absolute;
    right: 10rpx;
    top: 50%;

    transform: translateY(-50%);
}

/* 自定义按钮 */
.custom-button {
    width: 100%;
    height: 90rpx;
    background-color: var(--color-primary, #ff9fb5);
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
    border: none;
}

.button-disabled {
    background-color: #cccccc;
    color: #ffffff;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20rpx);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
